<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <title>newOrders</title>
    <link rel="StyleSheet" href="/css/mypetstore.css" type="text/css" media="screen"/>
</head>
<body>
<div th:replace="~{common/top}"></div>
<div id="Content">
<div id="Catalog" style="text-align: center;">
    <form method="post" th:action="@{/order/newOrder}" th:object="${order}" id="newOrderForm">
        <table   width="100%"   height="100%" border="0"   cellspacing="0"   cellpadding="0">
            <tr>
                <td   align="center"   valign="middle">
                    <table style="background-color:lightskyblue; margin:auto">
                        <tr>
                            <th colspan=2>Payment Details</th>
                        </tr>
                        <tr>
                            <td><font color='red'>*</font>Card Type:</td>
                            <td>
                                <select name="cardType">
                                    <option th:value="Visa" th:selected="${order.cardType == 'Visa'}">Visa</option>
                                    <option th:value="MasterCard" th:selected="${order.cardType == 'MasterCard'}">MasterCard</option>
                                    <option th:value="AmericanExpress" th:selected="${order.cardType == 'American Express'}">American Express</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td><span style="color: red">*</span>Card Number:</td>
                            <td>
                                <input type="text" name="creditCard" th:value="${order.creditCard}" />
                                <div id="creditCardTips"></div>
                            </td>
                        </tr>
                        <tr>
                            <td><span style="color: red">*</span>Expiry Date (MM/YYYY):</td>
                            <td>
                                <input type="text" name="expiryDate" th:value="${order.expiryDate}" />
                            </td>
                        </tr>
                        <tr>
                            <th colspan="2">Billing Address</th>
                        </tr>
                        <tr>
                            <td><span style="color: red">*</span>First name:</td>
                            <td>
                                <input type="text" name="billToFirstName" th:value="${order.billToFirstName}" />
                            </td>
                        </tr>
                        <tr>
                            <td><span style="color: red">*</span>Last name:</td>
                            <td>
                                <input type="text" name="billToLastName" th:value="${order.billToLastName}" />
                            </td>
                        </tr>
                        <tr>
                            <td><span style="color: red">*</span>Address 1:</td>
                            <td>
                                <input type="text" size="40" name="billAddress1" th:value="${order.billAddress1}" />
                            </td>
                        </tr>
                        <tr>
                            <td>Address 2:</td>
                            <td>
                                <input type="text" size="40" name="billAddress2" th:value="${order.billAddress2}" />
                            </td>
                        </tr>
                        <tr>
                            <td><span style="color: red">*</span>City:</td>
                            <td>
                                <input type="text" name="billCity" th:value="${order.billCity}" />
                            </td>
                        </tr>
                        <tr>
                            <td><span style="color: red">*</span>State:</td>
                            <td>
                                <input type="text" size="4" name="billState" th:value="${order.billState}" />
                            </td>
                        </tr>
                        <tr>
                            <td><span style="color: red">*</span>Zip:</td>
                            <td>
                                <input type="text" size="10" name="billZip" th:value="${order.billZip}" />
                            </td>
                        </tr>
                        <tr>
                            <td><span style="color: red">*</span>Country:</td>
                            <td>
                                <input type="text" size="15" name="billCountry" th:value="${order.billCountry}" />
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <input type="checkbox" onchange="this.nextElementSibling.value = (this.nextElementSibling.value==0)?1:0"/>
                                <input type="hidden" name="shippingAddressRequired" value="1"/>
                                Ship to different address...
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        <input type="submit" th:value="Continue"/>
    </form>
</div>
<script>
    // $(document).on('submit', '#newOrderForm',function (e) {
    //     e.preventDefault();
    //     $.ajax({
    //         type    :   'POST',
    //         url     :   'http://localhost:8080/order/newOrder',
    //         data    :   $('#newOrderForm').serialize(),
    //         success :   function (data){
    //             if (data.valid) {
    //                 $("#Catalog").load("http://localhost:8080/order/confirmOrder #Catalog");
    //             }else {
    //                 $('#creditCardTips').text("Invalid Card Number!").css("color","red").css("font-size", "15px");
    //             }
    //         },
    //         error   :   function (errorMsg){
    //             console.log(errorMsg);
    //         }
    //     });
    // });

    // $(document).on('submit', '#shippingForm',function (e) {
    //     e.preventDefault();
    //     $.ajax({
    //         type    :   'POST',
    //         url     :   'http://localhost:8080/order/shippingAddress',
    //         data    :   $('#shippingForm').serialize(),
    //         success :   function (){
    //             $("#Catalog").load("http://localhost:8080/order/confirmOrderForm #Catalog");
    //         },
    //         error   :   function (errorMsg){
    //             console.log(errorMsg);
    //         }
    //     });
    // });
    //
    // $(document).on('click','#confirm', function () {
    //     $.ajax({
    //         type    : 'GET',
    //         url     : 'http://localhost:8080/order/viewOrder',
    //         success : function (data){
    //             if (data.valid) {
    //                 $("#Catalog").load("http://localhost:8080/order/viewOrderForm #Catalog");
    //             }else {
    //                 $("#Catalog").load("http://localhost:8080/order/errorForm #Catalog");
    //             }
    //         },
    //         error   : function (errorMsg){
    //             console.log(errorMsg);
    //         }
    //     });
    // });
    //
    // $(document).on('click','#back', function () {
    //     $("#Catalog").load("http://localhost:8080/order/newOrderForm #Catalog");
    // });
</script>
</div>
<div th:replace="~{common/bottom}"></div>
</body>
</html>
